<template>
  <div id="walletId">
    <div class="top-container pd_t_60">
      <image src="../../static/img/user_bg.png" class="bg_img"></image>
      <div class="font-24 col-fff pd_l_30 pd_r_30 pd_b_45">钱包余额 (元)
        <u-icon name="question-circle" size="32" color="#fff" style="margin-left: 10upx" @click="showQuestion"></u-icon>
      </div>
      <div class="row cont-center pd_l_30 pd_r_30">
        <div class="font-76 col-fff flex-1">{{currentMoney ? currentMoney : '0'}}</div>
        <div class="font-28 text-cent withdrawal-btn">
          <u-button type="primary" size="mini" :custom-style="customStyle" shape="circle" @click="openWindow(`/pages/user/withdrawal?currentMoney=${currentMoney}`)">提现</u-button>
        </div>
      </div>
    </div>
    <div class="container bg-fff tabs">
      <div class="row cont-center jaround font-28 yh_bd_bottom pd_t_30 col-333">
        <div class="pd_b_30 text-cent title" :class="{to_active:show == 1}" @click="toshow('1')">收入记录</div>
        <div class="pd_b_30 text-cent title" :class="{to_active:show == 2}" @click="toshow('2')">提现记录</div>
      </div>

    </div>
    <scroll-view scroll-y class="pd_l_30 pd_r_30 scroll-view">
      <div v-if="show == 1" class="pd_l_30 pd_r_30 ">
        <div v-for="(item,index) in list" :key="index" class="pd_t_30 pd_b_30 yh_bd_bottom">
          <div class="row cont-center">
            <div class="font-28 col-333 flex-1 pd_b_10">{{item.activityName}}</div>
            <div class="font-28 col-FF8B37">+{{item.earningMoney}}</div>
          </div>
          <div class="font-24 col-999">{{item.updateTime}}</div>
        </div>
      </div>

      <div v-if="show == 2" class="pd_l_30 pd_r_30 ">
        <div v-for="(item,index) in list" :key="index" class="pd_t_30 pd_b_30 yh_bd_bottom">
          <div v-if="item.status == 3" @click="rejected(item)" class="row cont-center">
            <div v-for="(value, k, i) in item.bankAlipay">
              <div style="width: 330upx;" v-if="k == 'type' && value == 1" class="font-28 col-333 pd_b_10 pd_r_30">提现到我的银行卡（尾号{{item.account}})</div>
              <div style="width: 330upx;" v-if="k == 'type' && value == 2" class="font-28 col-333 pd_b_10 pd_r_30">提现到我的支付宝（尾号{{item.account}}）</div>
            </div>
            <div v-if="item.status == 1" class="font-22 col-fff bg-FF8B37 text-cent state">待审批</div>
            <div v-if="item.status == 2" class="font-22 col-fff bg-21B100 text-cent state">已通过</div>
            <div v-if="item.status == 3" class="font-22 col-fff bg-FF8B37 text-cent state">已驳回</div>
            <div v-if="item.status == 4" class="font-22 col-fff bg-FF8B37 text-cent state">已关闭</div>
            <div v-if="item.status == 5" class="font-22 col-fff bg-21B100 text-cent state">已到账</div>
            <div v-if="item.status == 6" class="font-22 col-fff bg-FF8B37 text-cent state">提现失败</div>
            <div class="flex-1"></div>
            <div class="font-28 col-333">-{{item.money}}</div>
          </div>
          <div v-if="item.status != 3" class="row cont-center">
            <div v-for="(value, k, i) in item.bankAlipay">
              <div style="width: 330upx;" v-if="k == 'type' && value == 1" class="font-28 col-333 pd_b_10 pd_r_30">提现到我的银行卡（尾号{{item.account}})</div>
              <div style="width: 330upx;" v-if="k == 'type' && value == 2" class="font-28 col-333 pd_b_10 pd_r_30">提现到我的支付宝（尾号{{item.account}}）</div>
            </div>
            <div v-if="item.status == 1" class="font-22 col-fff bg-FF8B37 text-cent state">待审批</div>
            <div v-if="item.status == 2" class="font-22 col-fff bg-21B100 text-cent state">已通过</div>
            <div v-if="item.status == 3" class="font-22 col-fff bg-FF8B37 text-cent state">已驳回</div>
            <div v-if="item.status == 4" class="font-22 col-fff bg-FF8B37 text-cent state">已关闭</div>
            <div v-if="item.status == 5" class="font-22 col-fff bg-21B100 text-cent state">已到账</div>
            <div v-if="item.status == 6" class="font-22 col-fff bg-FF8B37 text-cent state">提现失败</div>
            <div class="flex-1"></div>
            <div class="font-28 col-333">-{{item.money}}</div>
          </div>
          <div class="font-24 col-999" v-if="item.dealTime">{{item.dealTime}}</div>
        </div>
      </div>
      <div class="no-data-img" v-if="list.length < 1" style="padding-top: 80upx">
        <u-empty :text="show==1?'暂无收入记录~':'暂无提现记录~'" mode="favor"></u-empty>
      </div>
    </scroll-view>
    <u-popup v-model="agreementPopupShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45" style="height: 770upx">
        <div class="font-28 font-b pd_b_45 text-cent">我的钱包规则</div>
        <div style="overflow: scroll;height: 530upx;" class="font-26 col-666 pd_b_70">
          <u-parse :html="content"></u-parse>
        </div>
        <div class="confirm-btn text-cent col-fff font-26 bg-FF8B37">
          <u-button type="primary" :custom-style="customStyle1" shape="circle" @click="agreementPopupShow = false">确定</u-button>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
  import {request} from "../../util/api";
  import {THEME} from "../mixins/config";

  export default {
    name: "",
    data() {
      return {
        show: '1',
        currentMoney: '',
        list: [],
        noData: true,
        customStyle: {
          background: '#fff',
          padding: '0 50rpx',
          color: THEME.text_active_color
        },
        customStyle1: {
          background: THEME.btn_active_bg_color,
          padding: '0 50rpx'
        },
        agreementPopupShow: false,
        userType: '',
        content: ''
      }
    },

    onShow() {
      this.getLoginUserInfo()
      if (this.show == 1) {
        this.getRevenueRecords();
      } else{
        this.getWithdrawalRecord();
      }
    },
    methods: {
      rejected(obj){
        uni.showModal({
          title: '驳回原因',
          content: obj.failReason,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },

      toshow(val) {
        this.show = val;
        if (val == 1) {
          this.getRevenueRecords();
        } else {
          this.getWithdrawalRecord();
        }
      },

      getLoginUserInfo() {
        var that_ = this;
        request({
          url: '/app/userCenter/getLoginUserInfo'
        }).then(ret => {
          that_.currentMoney = ret.data.currentMoney;
          this.userType = ret.data.userType
        })
      },

      getRevenueRecords() {
        var that_ = this;
        that_.list = [];
        request({
          url: '/app/userCenter/earnings'
        }).then(ret => {
          if (ret.data.length > 0) {
            that_.list = ret.data;
          }
        })
      },

      getWithdrawalRecord() {
        var that_ = this;
        that_.list = [];
        request({
          url: '/app/userCenter/cashOuts'
        }).then(ret => {
          if (ret.data.length > 0) {
            that_.list = ret.data;
          }
        })
      },

      openWindow(path) {
        this.$u.route({
          url: path,
          params: {
            currentMoney: this.currentMoney
          }
        })
      },

      // 钱包规则
      showQuestion() {
        this.agreementPopupShow = true
        this.getCurrentUser()
      },

      getCurrentUser () {
        var that_ = this;
        request({
          url: this.userType == 1 ?  '/app/userCenter/getNormalUserWalletInfo' : '/app/userCenter/getPromoteWalletInfo'
        }).then(ret => {
          that_.content = ret.data.content;
        })
      }
    }
  }
</script>

<style lang="scss">
  $active_color: #2A6AAA;
  #walletId {
    display: flex;
    height: 100%;
    flex-direction: column;
    .top-container {
      padding-top: 60upx;
      position: relative;
      height: 320upx;
      .bg_img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 320upx;
      }
      .font-76 {
        font-size: 76upx;
      }
    }
    .tabs {
      .title {
        width: 50%;
      }
      .to_active {
        color: $active_color;
        border-bottom: 4upx solid $active_color;
      }
    }
    .scroll-view {
      flex: 1;
      box-sizing: border-box;
    }
    .popup-container {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
    }
    .bg-FF8B37 {
      //background: $active_color;
    }
    .bg-21B100 {
      background: #21B100;
    }
    .state{
      width: 98upx;
      height: 36upx;
      line-height: 36upx;
      border-radius: 18upx;
    }
  }
</style>
